<template>
	<div class="week-wrap">
		<h3 class="title">
			<span class="list-title">本周热门榜单</span>
			<a class="list-all" href="javascript:void(0);">全部榜单></a>
		</h3>
		<div class="week-list-wrap">
			<dl class="week-list" v-for="item of weekList" :key="item.id">
				<dd class="img-wrap">
					<img class="img-item" :src="item.imgUrl" alt="榜单">
				</dd>
				<dt class="list-desc">
					<p class="desc">{{item.title}}</p>
					<p class="price">
						<span>{{item.price}}</span>起
					</p>
				</dt>
			</dl>
		</div>
		
	</div>
</template>
<script>
	export default{
		name:"HomeWeeklist",
		props:{
			weekList:Array
		}
	}
</script>
<style lang="less" scoped>
	@import '~less/common/fun.less';
	@import '~less/common/base.less';
	.week-wrap{
		margin-top: .3rem;
		background: #fff;
		.title{
			padding: .26rem .2rem;
			position: relative;
			.list-all{
				position: absolute;
				right: .2rem;
				bottom: .26rem;
				font-size: .24rem;
			}
		}
		.week-list-wrap{
			padding: 0 .2rem;
			overflow: hidden;
			overflow-x: scroll;
			white-space: nowrap;
			.week-list{
				width: 2rem;
				display: inline-block;
				padding: .1rem .04rem .2rem .04rem;
				.img-wrap{
					height: 0;
					padding-bottom: 100%;
					.img-item{
						width: 100%;
					}
				}
			}
			.desc{
				font-size: .24rem;
				text-align: center;
				padding: .1rem;
				.ellipsis();
			}
			.price{
				text-align: center;
				font-size: .20rem;
				span{
					color:@priceColor;
					font-size: .26rem;
				}
			}
		}
	}
</style>